<template>
    <video-background ref="videobackground" id="videobackground" :src="videoSrc"
        poster="../../assets/image/login/login_bg.png" style="height: 100%; width: 100%" :loop="true"
        overlay="../../assets/image/login/login_bg.png" :autoplay="true">
        <div class="site-wrapper site-page--login">
            <div class="site-content__wrapper">
                <div class="site-content">
                    <div class="sys-title">
                        <!--<img src="../../assets/image/logo.png" width="40px">-->
                        <span>XXX系统</span>
                        <!--<h3>Intelligent emergency comprehensive management system of Ganyu Economic Development Zone</h3>-->
                    </div>
                    <div class="login-main">
                        <div class="divPanel">
                            <div class="wcl">
                                <span>Welcome!</span>
                                <div class="wcl1">登录综合管理系统</div>
                            </div>
                        </div>
                        <div class="divPanel1">
                            <!--<h3 class="login-title">登录</h3>-->
                            <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef"
                                @keyup.enter.native="dataFormSubmit2()" status-icon>
                                <el-form-item prop="userName">
                                    <el-input :prefix-icon="User" v-model="dataForm.userName"
                                        placeholder="请输入用户手机号"></el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input :prefix-icon="Lock" v-model="dataForm.password" type="password"
                                        show-password placeholder="请输入密码"></el-input>
                                </el-form-item>
                                <el-form-item style="text-align: right; line-height: 20px !important">
                                    <span style="color: #333333; font-size: 12px; cursor: pointer"
                                        @click="forgotPassword">忘记输入密码？</span>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="login-btn-submit" type="primary"
                                        @click="dataFormSubmit2(dataFormRef)">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </video-background>
</template>

<script setup lang='ts'>
import VideoBackground from 'vue-responsive-video-background-player'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import {  ElMessageBox,ElMessage, type FormInstance, type FormRules } from 'element-plus'
import videoSrc from '../../assets/video/bg.mp4'
import { systemLogin } from '../../utils/request'
import { useRouter } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
import { sessionSet } from '../../utils/auth'
const dataForm = reactive({
    userName: "15711211409",
    password: "97$599Vb",
})

const dataFormRef = ref<FormInstance>();
const dataRule = reactive<FormRules>({
    userName: [
        { required: true, message: "帐号不能为空", trigger: "blur" },
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: "blur" },
    ],
})
const router = useRouter();
const dataFormSubmit = async ()=> {
    if (!dataFormRef.value) return
    //处理登录相关逻辑
    router.replace({ name: "home" });
    await dataFormRef.value.validate(async (valid) => {
        if (valid) {
            const { code, data, msg, error } = await systemLogin(dataForm);
            if (code === 0) {
                //模拟设置token
                sessionSet("token", data['token']);
                sessionSet("userName", data['userName']);
                sessionSet("deptName", data['deptName']);
                sessionSet("roleList", JSON.stringify(data['roleList']));
                sessionSet("roleId", data['roleList'][0]['roleId']);
                sessionSet("userId", data['userId']);
                //处理登录相关逻辑
                router.replace({ name: "home" });
            } else {
                ElMessage({
                    message: msg ? msg : error,
                    type: "warning",
                });
            }
        }
    });
}
const dataFormSubmit2 = ()=> {
    dataFormSubmit();
}
const forgotPassword = ()=> {
    ElMessageBox.alert("请联系管理员", "提醒", {
        confirmButtonText: "确定",
        callback: (action) => { },
    });
}

const slideblock = ref<SlideVerify>(null);
const text = ref("向右滑动->")
// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
const accuracy = ref(1)
onMounted(() => {
    console.log(`the component is now mounted.`)
})
 
onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
})
</script>

<style scoped lang="scss">
.site-wrapper.site-page--login {
    // position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../../assets/image/login/login_bg.png") no-repeat;
    background-size: cover;
    overflow: hidden;
    font-family: Source Han Sans CN, serif;

    &:before {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: "";
    }

    .site-content__wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: transparent;
    }

    .site-content {
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    :deep(.login-main) {
        display: flex;
        position: fixed;
        width: 800px;
        height: 500px;
        // background-color: rgba(255, 255, 255, 0.1);
        background-color: rgba(0, 76, 154, 0.15);
        margin-top: 70px;
        // background: url("../../assets/image/login/login_main_bg.png") round;
        background-size: cover;

        .el-form-item__content {
            line-height: 60px;
        }

        .el-icon-user:before,
        .el-icon-lock:before {
            font-size: 26px;
            padding-top: 5px;
        }

        .el-input--prefix .el-input__inner {
            padding-left: 40px;
        }

        .el-input__prefix {
            padding-top: 5px;
        }

        .el-input input::-webkit-input-placeholder {
            font-size: 24px;
            font-family: Source Han Sans CN Normal, serif;
            font-weight: 400;
            color: #999;
        }

        .el-input__inner {
            height: 40px;
        }

        .el-input input::-ms-input-placeholder {
            font-size: 24px;
            font-family: Source Han Sans CN Normal, serif;
            font-weight: 400;
            color: #999;
        }

        .divPanel {
            flex: 1;
            align-items: center;
            justify-content: center;
            display: flex;
            border-right: 1px dashed rgba(255, 255, 255, 0.15);

            .wcl {
                font-size: 40px;
                font-family: Source Han Sans CN Normal, serif;
                font-weight: 400;
                color: #fbf6f4;
                line-height: 48px;
            }

            .wcl1 {
                margin-top: 25px;
            }
        }

        .divPanel1 {
            flex: 1;
            align-items: center;
            justify-content: center;
            display: flex;

            // margin-left: 120px;
            .el-input {
                width: 300px;
            }

            .el-input__inner {
                border: 0 solid;
                border-bottom: 1px solid #ccc;
                background: rgba(255, 255, 255, 0.1);
                // color: #fbf6f4;
            }

            .wcl {
                font-size: 32px;
                font-family: Source Han Sans CN, serif;
                font-weight: 400;
                color: #fbf6f4;
                line-height: 48px;
            }

            :deep(.el-form-item) {
                margin-bottom: 10px;
            }
        }

        .verifyCls {
            z-index: 99;
            position: absolute;
            top: 20%;
            left: 55%;
        }
    }

    .login-title {
        font-size: 20px;
        width: 100%;
        text-align: center;
        letter-spacing: 30px;
        /*color: #3aabd4;*/
        margin: 40px 0;
    }

    .login-btn-submit {
        /*width: 150%;*/
        /*margin-top: 38px;*/
        background-color: rgba(255, 255, 255, 0.17);
        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 40px;
        // height: 40px;
        width: 300px;
        font-family: Source Han Sans CN Normal, serif;
        font-size: 22px;
    }

    .sys-title {
        color: #ffffff;
        z-index: 1;
        position: fixed;
        top: 13%;
        text-align: center;
        font-family: Source Han Sans CN Medium, serif;
    }

    .sys-title span {
        font-size: 48px;
        letter-spacing: 2px;
        color: azure;
        font-family: Source Han Sans CN Medium, serif;
        font-weight: 500;
        line-height: 28px;
    }
}
</style>